<template>
  <el-dialog title="上传文件" :visible.sync="visible" width="880px" :close-on-click-modal="false" append-to-body>
    <div>
      <uploader :options="options" ref="uploader" @com :file-status-text="statusText" class="uploader-example"
                @file-success="onFileSuccess" @file-added="filesAdded">
        <uploader-unsupport></uploader-unsupport>
        <uploader-drop>

          <p>拖拽文件至此或点击按钮</p>
<!--          <uploader-btn>选择文件</uploader-btn>-->
        </uploader-drop>
        <uploader-list></uploader-list>
      </uploader>
    </div>
  </el-dialog>
</template>


<script>
import Vue from 'vue'
export default {
  name: 'FileUpload',
  data () {
    return {
      options: {
        target: this.$http.adornUrl('/file/file/chunkUpload'),
        chunkSize: 10 * 1024 * 1024,
        testChunks: false , //是否测试分片
        query: {
          // 传参
          token: Vue.cookie.get('token')
        }
      },
      statusText: {
        success: '成功了',
        error: '出错了',
        uploading: '上传中',
        paused: '暂停中',
        waiting: '等待中'
      },
      visible: false
    }
  },
  methods: {
    init () {
      this.visible = true
    },
    // 上传文件成功
    onFileSuccess (rootFile, file, response, chunk) {
      console.log(file.file.name + ':' + response)
    },
    // 添加文件上传
    filesAdded (file, event) {
      // 大小判断
      const isLt100M = file.size / 1024 / 1024 < 10
      console.log(file.name + '(大小):' + file.size)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
}
.uploader-list>ul>li{
  width:100%;
  color:red;
  margin-bottom: 0;
}
a {
  color: #42b983;
}
.fileupload{
  width:50%;
  margin-left: 25%;
}
</style>

<!--<script>-->
<!--import webUploader from 'webuploader'-->
<!--export default {-->
<!--  name: 'webupload',-->
<!--  props: {-->
<!--    headers: {-->
<!--      type: String,-->
<!--      default: ''-->
<!--    },-->
<!--    fileNumLimit: {-->
<!--      type: Number,-->
<!--      default: 500-->
<!--    },-->
<!--    fileSize: {-->
<!--      type: Number,-->
<!--      default: 100 * 1024 * 1024 * 1024-->
<!--    },-->
<!--    chunkSize: {-->
<!--      type: Number,-->
<!--      default: 5 * 1024 * 1024-->
<!--    },-->
<!--    uploadSuffixUrl: {-->
<!--      type: String,-->
<!--      default: window.SITE_CONFIG['baseUrl']-->
<!--    },-->
<!--    options: {-->
<!--      type: Object,-->
<!--      default: {-->
<!--        // 允许上传的文件-->
<!--        fileType: "doc,docx,pdf,xls,xlsx,ppt,pptx,gif,jpg,jpeg,bmp,png,rar,zip,mp4,avi",-->
<!--        fileUploadUrl: '/file/file/upload', // 上传地址-->
<!--        fileCheckUrl: '/file/file/md5Check', // 检测文件是否存在url-->
<!--        checkChunkUrl: '/file/file/md5Check', // 检测分片url-->
<!--        mergeChunksUrl: '/file/file/merge', // 合并文件请求地址-->
<!--        headers: {}-->
<!--      }-->
<!--    },-->
<!--    fileListData: {-->
<!--      type: Array,-->
<!--      default: []-->
<!--    }-->
<!--  },-->
<!--  data () {-->
<!--    return {-->
<!--      options: {-->
<!--        target: 'http://localhost:19433/htsys/file/file/',-->
<!--        chunkSize: 2 * 1024 * 1024-->
<!--      },-->
<!--      attrs: {-->
<!--        accept: 'video/*'-->
<!--      },-->
<!--      statusText: {-->
<!--        success: '成功了',-->
<!--        error: '出错了',-->
<!--        uploading: '上传中',-->
<!--        paused: '暂停中',-->
<!--        waiting: '等待中'-->
<!--      },-->
<!--      visible: false-->
<!--    }-->
<!--  },-->
<!--  methods: {-->
<!--    init () {-->
<!--      this.visible = true-->
<!--      // this.$nextTick(() => {-->
<!--      //   // this.timeArr = new Array()-->
<!--      //   // this.md5Arr = new Array()-->
<!--      //   this.uploaderInit()-->
<!--      //   this.register()-->
<!--      //   this.createUploader()-->
<!--      //   this.events()-->
<!--      // })-->
<!--    },-->
<!--    // 控件初始化-->
<!--    uploaderInit () {-->
<!--      // 创建上传-->
<!--      this.uploader = webUploader.create({-->
<!--        swf: '/plugin/webuploader-0.1.5/Uploader.swf',-->
<!--        server: '/upload',          // 服务端地址-->
<!--        pick: '#picker',              // 指定选择文件的按钮容器-->
<!--        resize: false,-->
<!--        chunked: true,                // 开启分片上传-->
<!--        chunkSize: 1024 * 1024 * 2,   // 每一片的大小-->
<!--        chunkRetry: 3,              // 如果遇到网络错误,重新上传次数-->
<!--        threads: 3                   // [默认值：3] 上传并发数。允许同时最大上传进程数。-->
<!--      })-->
<!--      // 当有文件被添加进队列的时候-md5序列化-->
<!--      this.uploader.on('fileQueued', function (file) {-->
<!--        console.log(file.name + "等待上传...")-->
<!--      })-->
<!--      // 发送前在body中添加一些信息，如分块数目chunks-->
<!--      this.uploader.on('uploadBeforeSend', function (block, data) {-->
<!--        // 事件里不支持这种用法-->
<!--        // var deferred = WebUploader.Deferred();-->
<!--        data.chunks = block.chunks-->
<!--        data.chunk = block.chunk-->
<!--        // data.chunkMD5 = chunk_md5-->
<!--        // data.fileMD5 = file_md5-->
<!--      })-->
<!--      // 上传完成后触发-->
<!--      this.uploader.on('uploadSuccess', function (file , response) {-->
<!--        // $("#percentage").text("100%")-->
<!--        console.log('上传完成')-->
<!--      })-->
<!--    },-->
<!--    // 注册函数-->
<!--    register () {-->
<!--      var uploadSuffixUrl = this.uploadSuffixUrl-->
<!--      var that = this-->
<!--      var options = this.options-->
<!--      // var headers = options.headers || {}-->
<!--      var fileCheckUrl = uploadSuffixUrl + options.fileCheckUrl;//检测文件是否存在url-->
<!--      var checkChunkUrl = uploadSuffixUrl + options.checkChunkUrl;//检测分片url-->
<!--      var mergeChunksUrl = uploadSuffixUrl + options.mergeChunksUrl;//合并文件请求地址-->

<!--      // 监控文件上传的三个时间点(注意：该段代码必须放在WebUploader.create之前)-->
<!--      // 时间点1：:所有分块进行上传之前（1.可以计算文件的唯一标记;2.可以判断是否秒传）-->
<!--      // 时间点2： 如果分块上传，每个分块上传之前（1.询问后台该分块是否已经保存成功，用于断点续传）-->
<!--      // 时间点3：所有分块上传成功之后（1.通知后台进行分块文件的合并工作）-->
<!--      webUploader.Uploader.register({-->
<!--        'before-send-file': 'beforeSendFile',-->
<!--        'before-send': 'beforeSend',-->
<!--        'after-send-file': 'afterSendFile'-->
<!--      }, {-->
<!--        // 时间点1：:所有分块进行上传之前调用此函数-->
<!--        beforeSendFile: function (file) {-->
<!--          let index = parseInt(file.id.slice(8)) // 文件下标-->
<!--          let startTime = new Date() // 一个文件上传初始化时，开始计时-->
<!--          that.timeArr[index] = startTime // 将每一个文件初始化时的时间放入时间数组-->
<!--          // 利用md5File（）方法计算文件的唯一标记符-->
<!--          // 创建一个deffered-->
<!--          var deferred = webUploader.Deferred();-->
<!--          // 1.计算文件的唯一标记，用于断点续传和秒传,获取文件前20m的md5值，越小越快，防止碰撞，把文件名文件大小和md5拼接作为文件唯一标识-->
<!--          (new webUploader.Uploader()).md5File(file, 0, 2 * 1024 * 1024).progress(function (percentage) {-->
<!--          }).then(function (val) {-->
<!--            console.log(val)-->
<!--            let index = file.id.slice(8)-->
<!--            that.md5Arr[index] = val // 将文件的MD5值放入数组，以便分片合并时能够取到当前文件对应的MD5-->
<!--            that.uploader.options.formData.guid = val // 全局的MD5-->
<!--            deferred.resolve()-->
<!--            // // //2.请求后台是否保存过该文件，如果存在，则跳过该文件，实现秒传功能-->
<!--            // that.$http({-->
<!--            //   url: this.$http.adornUrl(`/file/file/checkfile`),-->
<!--            //   method: 'post',-->
<!--            //   data: this.$http.adornData({-->
<!--            //     filemd5: file.fileMd5-->
<!--            //   })-->
<!--            // }).then(({data}) => {-->
<!--            //   if (data && data.code === 0) {-->
<!--            //     // 如果根据文件的MD5判断文件存在,那就跳过文件上传,如果需要的话,这里也可以返回具体的文件的路径.以便使用.-->
<!--            //     that.uploader.skipFile(file)-->
<!--            //   } else {-->
<!--            //     that.$message.error(data.msg)-->
<!--            //   }-->
<!--            // })-->
<!--            // $.ajax({-->
<!--            //   type: "POST",-->
<!--            //   url: fileCheckUrl,-->
<!--            //   headers: headers,-->
<!--            //   data: {-->
<!--            //     checkType: 1,-->
<!--            //     contentType: file.type,-->
<!--            //     zoneTotalMd5: val-->
<!--            //   },-->
<!--            //   dataType: "json",-->
<!--            //   success: function (response) {-->
<!--            //     if (response.success) {-->
<!--            //       that.uploader.skipFile(file);-->
<!--            //       that.setTableBtn(file.id, "文件秒传", response.data.networkPath);-->
<!--            //       that.$notify.success({-->
<!--            //         showClose: true,-->
<!--            //         message: `[ ${file.name} ]文件秒传`-->
<!--            //       });-->
<!--            //       //如果存在，则跳过该文件，秒传成功-->
<!--            //       that.fList.push(response.data);-->
<!--            //       deferred.reject();-->
<!--            //     } else {-->
<!--            //       if (response.code === 30001) {//判断是否支持此类文件上传-->
<!--            //         var m = response.message + "，文件后缀：" + file.ext;-->
<!--            //         that.uploader.skipFile(file);-->
<!--            //         that.setTableBtn(file.id, m);-->
<!--            //         //如果存在，则跳过该文件，秒传成功-->
<!--            //         that.fList.push(response.data);-->
<!--            //         deferred.reject();-->
<!--            //       } else {-->
<!--            //         //继续上传-->
<!--            //         deferred.resolve();-->
<!--            //       }-->
<!--            //     }-->
<!--            //   }-->
<!--            // });-->
<!--          })-->
<!--          // 返回deffered-->
<!--          // fileName = file.name;-->
<!--          return deferred.promise()-->
<!--        },-->
<!--        // 时间点2：如果有分块上传，则 每个分块上传之前调用此函数-->
<!--        // block:代表当前分块对象-->
<!--        beforeSend: function (block) {-->
<!--          let that = this-->
<!--          // 向后台发送当前文件的唯一标记，用于后台创建保存分块文件的目录-->
<!--          // 1.请求后台是否保存过当前分块，如果存在，则跳过该分块文件，实现断点续传功能-->
<!--          var deferred = webUploader.Deferred();-->
<!--          // 请求后台是否保存完成该文件信息，如果保存过，则跳过，如果没有，则发送该分块内容-->
<!--          (new webUploader.Uploader()).md5File(block.file, block.start, block.end).progress(function (percentage) {-->
<!--          }).then(function (val) {-->
<!--            block.zoneMd5 = val-->
<!--            // //2.请求后台是否保存过该文件，如果存在，则跳过该文件，实现秒传功能-->
<!--            that.$http({-->
<!--              url: that.$http.adornUrl(`/file/file/checkfile`),-->
<!--              method: 'post',-->
<!--              data: that.$http.adornData({-->
<!--                chunk: block.chunk,-->
<!--                chunkSize: block.end - block.start, // 当前分块大小-->
<!--                guid: that.uploader.options.formData.guid-->
<!--              })-->
<!--            }).then(({data}) => {-->
<!--              if (data && data.code === 0) {-->
<!--                // 如果根据文件的MD5判断文件存在,那就跳过文件上传,如果需要的话,这里也可以返回具体的文件的路径.以便使用.-->
<!--                // 分块存在，跳过-->
<!--                deferred.reject()-->
<!--              } else {-->
<!--                that.$message.error(data.msg)-->
<!--              }-->
<!--            })-->
<!--          })-->
<!--          return deferred.promise()-->
<!--        },-->
<!--        // 时间点3：所有分块上传成功之后调用此函数-->
<!--        afterSendFile: function (file) {-->
<!--          var deferred = webUploader.Deferred()-->
<!--          // 前台通知后台合并文件-->
<!--          // 1.如果分块上传，则通过后台合并所有分块文件-->
<!--          // 请求后台合并文件-->
<!--          let index = file.id.slice(8) // 获取文件的下标-->
<!--          that.$http({-->
<!--            url: this.$http.adornUrl(`/file/file/combine`),-->
<!--            method: 'post',-->
<!--            data: this.$http.adornData({-->
<!--              fileName: file.name, // 当前分块大小-->
<!--              guid: that.md5Arr[index]-->
<!--            })-->
<!--          }).then(({data}) => {-->
<!--            if (data && data.code === 0) {-->
<!--              // 如果根据文件的MD5判断文件存在,那就跳过文件上传,如果需要的话,这里也可以返回具体的文件的路径.以便使用.-->
<!--              // 分块存在，跳过-->
<!--              deferred.reject()-->
<!--            } else {-->
<!--              that.$message.error(data.msg)-->
<!--            }-->
<!--          })-->
<!--        }-->
<!--      })-->
<!--    },-->
<!--    createUploader () {-->
<!--      var fileType = this.options.fileType;-->
<!--      this.uploader = webUploader.create({-->
<!--        // 不压缩image-->
<!--        resize: false,-->
<!--        // swf文件路径-->
<!--        swf: '../../../assets/Uploader.swf', // swf文件路径-->
<!--        // 默认文件接收服务端。-->
<!--        server: this.uploadSuffixUrl + this.options.fileUploadUrl,-->
<!--        pick: {-->
<!--          id: '#extend-upload-chooseFile',//指定选择文件的按钮容器，不指定则不创建按钮。注意 这里虽然写的是 id, 不仅支持 id, 还支持 class, 或者 dom 节点。-->
<!--          multiple: true //开启文件多选-->
<!--        },-->
<!--        // fileSingleSizeLimit:fileSize,//单个文件大小-->
<!--        // accept: [{-->
<!--        //   title: 'file',-->
<!--        //   extensions: fileType,-->
<!--        //   mimeTypes: this.buildFileType(fileType)-->
<!--        // }],-->
<!--        // 单位字节，如果图片大小小于此值，不会采用压缩。512k  512*1024，如果设置为0，原图尺寸大于设置的尺寸就会压缩；如果大于0，只有在原图尺寸大于设置的尺寸，并且图片大小大于此值，才会压缩-->
<!--        compressSize: 0,-->
<!--        fileNumLimit: this.fileNumLimit,//验证文件总数量, 超出则不允许加入队列,默认值：undefined,如果不配置，则不限制数量-->
<!--        fileSizeLimit: 100 * 1024 * 1024 * 1024, //1kb=1024*1024,验证文件总大小是否超出限制, 超出则不允许加入队列。-->
<!--        fileSingleSizeLimit: this.fileSize, //验证单个文件大小是否超出限制, 超出则不允许加入队列。-->
<!--        chunked: true,//是否开启分片上传-->
<!--        threads: 1,-->
<!--        chunkSize: this.chunkSize,//如果要分片，每一片的文件大小-->
<!--        prepareNextFile: false//在上传当前文件时，准备好下一个文件,请设置成false，不然开启文件多选你浏览器会卡死-->
<!--      });-->
<!--    },-->
<!--    events () {-->
<!--      var that = this;-->
<!--      var uplaod = this.uploader;-->
<!--      //当文件添加进去-->
<!--      uplaod.on('fileQueued', function (file) {-->
<!--        var fileSize = that.formatFileSize(file.size);-->
<!--        var row = {-->
<!--          fileId: file.id,-->
<!--          fileName: file.name,-->
<!--          fileSize: fileSize,-->
<!--          validateMd5: '0%',-->
<!--          progress: "等待上传",-->
<!--          state: '就绪'-->
<!--        };-->
<!--        console.log("this.fileListData:", that.fileListData);-->
<!--        that.fileListData.push(row);-->
<!--      });-->

<!--      //监听进度条,更新进度条信息-->
<!--      uplaod.on('uploadProgress', function (file, percentage) {-->
<!--        that.setTableBtn(file.id, (percentage * 100).toFixed(2) + '%');-->
<!--      });-->

<!--      /**上传之前**/-->
<!--      uplaod.on('uploadBeforeSend', function (block, data, headers) {-->
<!--        data.fileMd5 = block.file.fileMd5;-->
<!--        data.contentType = block.file.type;-->
<!--        data.chunks = block.file.chunks;-->
<!--        data.zoneTotalMd5 = block.file.fileMd5;-->
<!--        data.zoneMd5 = block.zoneMd5;-->
<!--        data.zoneTotalCount = block.chunks;-->
<!--        data.zoneNowIndex = block.chunk;-->
<!--        data.zoneTotalSize = block.total;-->
<!--        data.zoneStartSize = block.start;-->
<!--        data.zoneEndSize = block.end;-->
<!--        headers.Authorization = that.options.headers.Authorization;-->
<!--      });-->

<!--      //错误信息监听-->
<!--      uplaod.on('error', function (handler) {-->

<!--        if (handler == 'F_EXCEED_SIZE') {-->
<!--          that.$message.error({-->
<!--            showClose: true,-->
<!--            message: '上传的单个太大!\n最大支持' + that.formatFileSize(that.fileSize) + '! \n操作无法进行,如有需求请联系管理员'-->
<!--          });-->
<!--        } else if (handler == 'Q_TYPE_DENIED') {-->
<!--          that.$message.error({-->
<!--            showClose: true,-->
<!--            message: '不允许上传此类文件!。<br>操作无法进行,如有需求请联系管理员'-->
<!--          });-->
<!--        }-->
<!--      });-->

<!--      /**从文件队列移除**/-->
<!--      uplaod.on('fileDequeued', function (file) {-->
<!--        // delete percentages[ file.id ];-->
<!--      });-->

<!--      //当文件上传成功时触发。file {ArchivesFile} File对象, response {Object}服务端返回的数据-->
<!--      uplaod.on('uploadSuccess', function (file, response) {-->
<!--        // debugger;-->
<!--        if (response.success) {-->
<!--          that.setTableBtn(file.id, '正在校验文件...');-->
<!--        }-->
<!--      })-->
<!--      //所有文件上传成功后-->
<!--      uplaod.on('uploadFinished', function () {//成功后-->
<!--        that.uploadBtnDisabled = false;-->
<!--        that.uploadStaus = "el-icon-upload";-->
<!--        that.$message.success({-->
<!--          showClose: true,-->
<!--          message: '文件上传完毕'-->
<!--        });-->

<!--      });-->
<!--    },-->
<!--    setTableBtn (fileId, showmsg, networkPath) {-->
<!--      var fileList = this.fileListData;-->
<!--      for (var i = 0; i < fileList.length; i++) {-->
<!--        if (fileList[i].fileId == fileId) {-->
<!--          this.fileListData[i].progress = showmsg;-->
<!--          this.fileListData[i].networkPath = networkPath || "";-->
<!--        }-->
<!--      }-->
<!--    },-->
<!--    removeRow (index, row) {-->
<!--      console.log("index:", index);-->
<!--      console.log("row:", row);-->
<!--      this.uploader.removeFile(row.fileId);-->
<!--      this.fileListData.splice(index, 1);-->
<!--    },-->
<!--    seeFile (index, row) {-->
<!--      console.log("row:", row);-->
<!--      var npath = row.networkPath;-->
<!--      if (this.strIsNull(npath)) {-->
<!--        this.$message.error({-->
<!--          showClose: true,-->
<!--          message: '文件未上传，请等待文件上传完成后，方可查看'-->
<!--        });-->
<!--        return;-->
<!--      }-->
<!--      var filens = npath.substring(npath.lastIndexOf(".") + 1);-->
<!--      if (filens == "png" || filens == "jpg" || filens == "jpeg"-->
<!--        || filens == "gif") {//图片，在当前窗口查看-->
<!--        this.$message.success({-->
<!--          dangerouslyUseHTMLString: true,-->
<!--          showClose: true,-->
<!--          message: `<img src="${this.uploadSuffixUrl + npath}" style="max-width: 80%;max-height: 80%;"/>`-->
<!--        });-->
<!--      } else {-->
<!--        window.open(this.uploadSuffixUrl + npath);-->
<!--      }-->
<!--    },-->
<!--    uploadToServer () {-->
<!--      if (this.fileListData.length <= 0) {-->
<!--        this.$message.error({-->
<!--          showClose: true,-->
<!--          message: '没有上传的文件'-->
<!--        });-->
<!--        return;-->
<!--      }-->
<!--      this.uploadBtnDisabled = true;-->
<!--      this.uploadStaus = "el-icon-loading";-->
<!--      // $("#extent-button-uploader").text("正在上传，请稍等...");-->
<!--      // $("#extent-button-uploader").addClass('layui-btn-disabled');-->
<!--      this.uploader.upload();-->
<!--    },-->
<!--    clearFiles () {-->
<!--      var that = this;-->
<!--      that.uploadBtnDisabled = false;-->
<!--      that.uploadStaus = "el-icon-upload";-->
<!--      that.uploader.reset();-->
<!--      that.fileListData = [];-->
<!--    },-->
<!--    beginUploadFile (index, row) {-->
<!--      this.uploadBtnDisabled = false;-->
<!--      this.uploadStaus = "el-icon-upload";-->
<!--      this.uploader.upload();-->
<!--    },-->
<!--    stopUploadFile (index, row) {-->
<!--      this.uploadBtnDisabled = false;-->
<!--      this.uploadStaus = "el-icon-upload";-->
<!--      this.uploader.stop();-->
<!--    },-->
<!--    buildFileType (fileType) {-->
<!--      var ts = fileType.split(',');-->
<!--      var ty = '';-->

<!--      for (var i = 0; i < ts.length; i++) {-->
<!--        ty = ty + "." + ts[i] + ",";-->
<!--      }-->
<!--      return ty.substring(0, ty.length - 1)-->
<!--    },-->
<!--    strIsNull (str) {-->
<!--      if (typeof str == "undefined" || str == null || str == "")-->
<!--        return true;-->
<!--      else-->
<!--        return false;-->
<!--    },-->
<!--    formatFileSize (size) {-->
<!--      var fileSize = 0;-->
<!--      if (size / 1024 > 1024) {-->
<!--        var len = size / 1024 / 1024;-->
<!--        fileSize = len.toFixed(2) + "MB";-->
<!--      } else if (size / 1024 / 1024 > 1024) {-->
<!--        var len = size / 1024 / 1024;-->
<!--        fileSize = len.toFixed(2) + "GB";-->
<!--      } else {-->
<!--        var len = size / 1024;-->
<!--        fileSize = len.toFixed(2) + "KB";-->
<!--      }-->
<!--      return fileSize;-->
<!--    },-->

<!--  }-->
<!--}-->
<!--</script>-->
<!--&lt;!&ndash; Add "scoped" attribute to limit CSS to this component only &ndash;&gt;-->
<!--<style scoped>-->
<!--h1, h2 {-->
<!--  font-weight: normal;-->
<!--}-->
<!--ul {-->
<!--  list-style-type: none;-->
<!--  padding: 0;-->
<!--}-->
<!--li {-->
<!--  display: inline-block;-->
<!--}-->
<!--.uploader-list>ul>li{-->
<!--  width:100%;-->
<!--  color:red;-->
<!--  margin-bottom: 0;-->
<!--}-->
<!--a {-->
<!--  color: #42b983;-->
<!--}-->
<!--.fileupload{-->
<!--  width:50%;-->
<!--  margin-left: 25%;-->
<!--}-->
<!--</style>-->
